<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1、继承性 */
      /* 文字的样式会被子级继承 */
      /* 如果子元素有自己的文字样式，不会受继承的文字影响<a> */
      .box {
        color: red;
      }
      /* 继承由近到远 */
      .box2 {
        color: blue;
        font-size: 48px;
      }
      /* 2、层叠性 */
      /* 同名属性会被覆盖 */
      .box2 {
        color: gray;
      }
      /* 3、权重：优先级 */
      /* ！important  强制将优先级提到最高*/
      /* 行内 id class 标签选择器 通配符 */
      /* 行内 1000 */
      /* id 100 */
      /* class 10 */
      /* 标签 1  */
      /* 通配符 0 */
      /* 如果有多个选择器，选择器权重会相加 */
      /* 如果权重相同，后者会覆盖前者 */

    </style>
  </head>
  <body>
    <div class="box">
      <p>哈哈哈</p>
      <div class="box2">
        <span>heihh</span>
        <h1>标题</h1>
      </div>
      <a href="www.baidu.com">百度</a>
    </div>
  </body>
</html>
